<template>
  <h5>Son 子组件</h5>
  <p>num 的值是：{{ num }}</p>
  <p>intro 的值是：{{ intro }}</p>
  <p>author 的值是：{{ author }}</p>
  <p>favor 的值是：{{ favor }}</p>
  <button @click="readMore()">调用 readMore 函数</button>
</template>

<script setup>
import { Author } from './propTypes.js'
import { watchEffect, watch } from 'vue'
import { useDemo } from './hooks.js'

const { num } = defineProps({
  // 键值对
  // 键是 Prop 名，值是数据的类型（类型的首字母大写）
  num: {
    type: Number,
    required: true,
    default: 0
  },
  flag: Boolean,
  intro: {
    type: [String, Number],
    default: '地表最强系列视频教程'
  },
  author: {
    // type: Object,
    type: Author,
    // required: true,
    default(rawProps) {
      // console.log(rawProps)
      return new Author('匿名用户', 18)
      // return { name: '匿名用户', age: 18 }
    }
  },
  readMore: {
    type: Function,
    // 这里的 default 函数不再是工厂函数，
    // 而是一个默认值
    default() {
      console.log('执行了默认的 default 函数。')
    }
  },
  articleType: {
    // 形参1：是 articleType 传入的值
    validator(value, props) {
      // console.log(props)
      return ['新闻', '娱乐', '军事'].includes(value)
    }
  },
  title: {
    type: [String, null],
    required: true
  },
  favor: Boolean
})

// watchEffect(() => {
//   // console.log(props.num)
//   console.log(num)
// })

// watch(
//   () => num,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal)
//   }
// )

useDemo(() => num)
</script>
